﻿@inject Personalblog.Contrib.SiteMessage.Messages Messages

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ZY知识库 继承画星星博客">
    <title>ZY知识库 · ZY - @ViewData["Title"]</title>
    <link rel="icon" href="~/images/logo2.gif" />
    @*<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />*@
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="~/css/all.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/features.css">
    <link rel="stylesheet" href="/css/metro.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link href="~/css/editormd.preview.css" rel="stylesheet" />
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.css" rel="stylesheet">

    <link href="~/mp3/index.aed4c9e8.css" rel="stylesheet" />
    
    <script src="/js/siteLoad.js"></script>
    @await RenderSectionAsync("head", false)
@*    <style type="text/css">
        body,html{
            filter:grayscale(100%);
            -webkit-filter:grayscale(100%);
        }
    </style>*@
    <style>
        .round-icon {
            border-radius: 50%;
            width: 66px;
            height: 66px;
            object-fit: cover;
        }

        .animated-icon {
            transition: transform 0.5s ease-in-out;
        }

            .animated-icon:hover {
                transform: scale(1.2) rotate(360deg);
            }

        .nav-link {
            text-decoration: none;
            color: white;
        }

            .nav-link:hover {
                text-decoration: none;
                color: white;
            }

        .bi {
            transition: transform 0.3s;
        }

        li:hover .bi {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
    @*<mini-profiler />*@
    <header id="vue-header">
        <div class="px-3 py-2 bg-dark text-white">
            <div class="container">
                <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                    <a class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"
                       asp-controller="Home" asp-action="Index" >
                        <img src="~/images/logo4.jpg" class="round-icon animated-icon" alt="">
                    </a>

                    <ul class="nav col-12 col-lg-auto pt-1 my-2 justify-content-center my-md-0 text-small">
                        <li>
                            <a class="nav-link text-white" asp-controller="Home" asp-action="Index">
                                <div class="bi d-block mx-auto mb-1 text-center">
                                    @*<i class="bi bi-house-door-fill" style="font-size:25px"></i>*@
                                    <i class="fa-solid fa-house fa-2xl"></i>
                                </div>
                                Home
                            </a>
                        </li>
                        <li>
                            <a class="nav-link text-white" asp-controller="Blog" asp-action="List">
                                <div class="bi d-block mx-auto mb-1 text-center">
                                    <i class="fa-solid fa-table-list fa-2xl"></i>
                                </div>
                                Blog
                            </a>
                        </li>
                        <li>
                            <a class="nav-link text-white" asp-controller="Photo" asp-action="Index">
                                <div class="bi d-block mx-auto mb-1 text-center">
                                    <i class="fa-solid fa-images fa-2xl"></i>
                                </div>
                                Photos
                            </a>
                        </li>
                        @* <li> *@
                        @*     <a class="nav-link text-white" asp-controller="Product" asp-action="Index"> *@
                        @*         <div class="bi d-block mx-auto mb-1 text-center"> *@
                        @*             <i class="fa-solid fa-cubes fa-2xl"></i> *@
                        @*         </div> *@
                        @*         Products *@
                        @*     </a> *@
                        @* </li> *@
                        @* <li> *@
                        @*     <a href="#" class="nav-link text-white"> *@
                        @*         <div class="bi d-block mx-auto mb-1 text-center"> *@
                        @*             <i class="fa-solid fa-terminal fa-2xl"></i> *@
                        @*         </div> *@
                        @*         Console *@
                        @*     </a> *@
                        @* </li> *@
                        <li>
                            <a class="nav-link text-white" asp-controller="About" asp-action="Index">
                                <div class="bi d-block mx-auto mb-1 text-center">
                                    <i class="fa-solid fa-circle-info fa-2xl"></i>
                                </div>
                                About
                            </a>
                        <li>
                            <a class="nav-link text-white" href="https://pljzy.top:5244/" target="_blank">
                                <div class="bi d-block mx-auto mb-1 text-center">
                                    <i class="fa-solid fa-download fa-2xl"></i>
                                </div>
                                Cloud
                            </a>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="px-3 py-2 border-bottom mb-3">
            <div class="container d-flex flex-wrap justify-content-center">
                <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"
                      asp-controller="Search" asp-action="Blog">
                    <input type="search" class="form-control" placeholder="Search..." aria-label="Search" name="keyword">
                </form>

                <div class="text-end">
                    <span class="dropdown me-2">
                        <a href="#" class="btn btn-light" id="dropdown" role="button" onclick="stopp()">
                            <i class="bi bi-arrow-repeat"></i>
                            樱花
                        </a>
                    </span>
                    <span class="dropdown me-2">
                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            Themes
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li v-for="theme in themes">
                                <a v-if="theme.name===currentTheme" class="dropdown-item active">{{theme.name}}</a>
                                <a v-else class="dropdown-item" v-on:click="setTheme(theme.name)">{{theme.name}}</a>
                            </li>
                        </ul>
                    </span>
                    @* todo 登录注册功能后续再来 *@
                    @* <button type="button" class="btn btn-light text-dark me-2">Login</button> *@
                    @* <button type="button" class="btn btn-primary">Sign-up</button> *@
                </div>
            </div>
        </div>
    </header>

    <main id="vue-app">
        <div class="container mt-3">
            @while (!Messages.IsEmpty)
            {
                var message = Messages.Dequeue();
                <partial name="Widgets/Alert" model="message" />
            }
        </div>
        @RenderBody()
    </main>

    <footer class="bg-dark">
        <div id="footer">
            <div class="container">
                <div class="row">
                    <div id="footer-content" class="col-md-10 col-md-offset-3 footer-list text-center">
                        <p class="social-icons">
                            <a target="_blank" rel="nofollow" href="https://www.cnblogs.com/ZYPLJ/"><i class="fa-solid fa-blog"></i></a>
                            <a asp-controller="About" asp-action="Index"><i class="fab fa-weixin"></i></a>
                            <a target="_blank" rel="nofollow" href="https://github.com/ZyPLJ"><i class="fab fa-github"></i></a>
                            <a target="_blank" rel="nofollow" href="https://gitee.com/zyplj"><i class="bi bi-git"></i></a>
                        </p>

                        <p>
                            Copyright © @DateTime.Now.Year.ToString()
                            <a href="https://gitee.com/zyplj">ZY</a>. All Rights Reserved.
                        </p>
                        <p>
                            All content is released under
                            <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en" rel="external nofollow" target="_blank">
                                Creative Commons
                                BY-NC-SA 3.0
                            </a>.
                            <br>
                            If articles including programming codes (e.g. Java, Python, C#, Go) are exceptions, which are released under
                            <a href="http://www.gnu.org/licenses/gpl.html"
                               rel="external nofollow" target="_blank">
                                GPL
                                v3
                            </a>.
                        </p>
                        <p>
                            所有內容皆以<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en" rel="external nofollow" target="_blank"> 知识共享署名-相同方式共享 4.0 国际许可协议 </a>进行发布。<br>
                            含有程序代码內容的文章 (如 Java, Python, C#, Go) 除外，包含的程序代码皆以 <a href="http://www.gnu.org/licenses/gpl.html" rel="external nofollow" target="_blank">GPL v3</a> 发布。
                        </p>
                        <p>
                            本站使用 <a href="https://github.com/ZyPLJ/personalblog">ZYBlog</a> 开源博客系统，
                            基于 <a href="https://dotnet.microsoft.com/zh-cn/">.NetCore</a> 技术构建
                        </p>
                        <p>
                            <span id="siteRunningTime" style="color:cornsilk">
                                网站运行时间：计算中...
                            </span>
                            &nbsp;&nbsp;
                            <a href="https://beian.miit.gov.cn">湘ICP备2023007264号-1</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script>
        !function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(),
                        o(e)
                }
            }
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart",
                    s.push({
                        el: a,
                        x: e.clientX - 5,
                        y: e.clientY - 5,
                        scale: 1,
                        alpha: 1,
                        color: c()
                    }),
                    t.body.appendChild(a)
            }
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
                function (e) {
                    setTimeout(e, 1e3 / 60)
                },
                i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
                n(),
                r()
        }(window, document);
        let stop, staticx;
        const img = new Image();
        img.src = "";

        function Sakura(x, y, s, r, fn) {
            this.x = x;
            this.y = y;
            this.s = s;
            this.r = r;
            this.fn = fn;
        }

        Sakura.prototype.draw = function (cxt) {
            cxt.save();
            const xc = 40 * this.s / 4;
            cxt.translate(this.x, this.y);
            cxt.rotate(this.r);
            cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
            cxt.restore();
        }

        Sakura.prototype.update = function () {
            this.x = this.fn.x(this.x, this.y);
            this.y = this.fn.y(this.y, this.y);
            this.r = this.fn.r(this.r);
            if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
                this.r = getRandom('fnr');
                if (Math.random() > 0.4) {
                    this.x = getRandom('x');
                    this.y = 0;
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                } else {
                    this.x = window.innerWidth;
                    this.y = getRandom('y');
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                }
            }
        }

        SakuraList = function () {
            this.list = [];
        }
        SakuraList.prototype.push = function (sakura) {
            this.list.push(sakura);
        }
        SakuraList.prototype.update = function () {
            let i = 0, len = this.list.length;
            for (; i < len; i++) {
                this.list[i].update();
            }
        }
        SakuraList.prototype.draw = function (cxt) {
            let i = 0, len = this.list.length;
            for (; i < len; i++) {
                this.list[i].draw(cxt);
            }
        }
        SakuraList.prototype.get = function (i) {
            return this.list[i];
        }
        SakuraList.prototype.size = function () {
            return this.list.length;
        }

        function getRandom(option) {
            let ret, random;
            switch (option) {
                case 'x':
                    ret = Math.random() * window.innerWidth;
                    break;
                case 'y':
                    ret = Math.random() * window.innerHeight;
                    break;
                case 's':
                    ret = Math.random();
                    break;
                case 'r':
                    ret = Math.random() * 6;
                    break;
                case 'fnx':
                    random = -0.5 + Math.random();
                    ret = function (x, y) {
                        return x + 0.5 * random - 1.7;
                    };
                    break;
                case 'fny':
                    random = 1.5 + Math.random() * 0.7
                    ret = function (x, y) {
                        return y + random;
                    };
                    break;
                case 'fnr':
                    random = Math.random() * 0.03;
                    ret = function (r) {
                        return r + random;
                    };
                    break;
            }
            return ret;
        }

        function startSakura() {

            requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame;
            let canvas = document.createElement('canvas'),
                cxt;
            staticx = true;
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
            canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
            canvas.setAttribute('id', 'canvas_sakura');
            document.getElementsByTagName('body')[0].appendChild(canvas);
            cxt = canvas.getContext('2d');
            const sakuraList = new SakuraList();
            for (let i = 0; i < 50; i++) {
                let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;
                randomX = getRandom('x');
                randomY = getRandom('y');
                randomR = getRandom('r');
                randomS = getRandom('s');
                randomFnx = getRandom('fnx');
                randomFny = getRandom('fny');
                randomFnR = getRandom('fnr');
                sakura = new Sakura(randomX, randomY, randomS, randomR, {
                    x: randomFnx,
                    y: randomFny,
                    r: randomFnR
                });
                sakura.draw(cxt);
                sakuraList.push(sakura);
            }
            stop = requestAnimationFrame(function () {
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                sakuraList.update();
                sakuraList.draw(cxt);
                stop = requestAnimationFrame(arguments.callee);
            })
        }

        window.onresize = function () {
            const canvasSnow = document.getElementById('canvas_sakura');
            canvasSnow.width = window.innerWidth;
            canvasSnow.height = window.innerHeight;
        }

        img.onload = function () {
            //startSakura();
        }
        function stopp() {
            if (staticx) {
                const child = document.getElementById("canvas_sakura");
                child.parentNode.removeChild(child);
                window.cancelAnimationFrame(stop);
                staticx = false;
            } else {
                startSakura();
            }
        }
        function calculateTimeDifference(startDate) {
            const now = new Date();
            const timeDifference = now - startDate;
            const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
            const hours = now.getHours(); // 使用24小时制
            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

            return { days, hours, minutes, seconds };
        }

        function updateSiteRunningTime() {
            // 网站开始运行的日期（根据实际情况修改）
            const startDate1 = new Date("2023-04-08");

            // 计算运行时间
            const timeDifference1 = calculateTimeDifference(startDate1);

            // 更新显示网站运行时间的元素
            const runningTimeElement1 = document.getElementById("siteRunningTime");
            runningTimeElement1.textContent = `网站运行时间：${timeDifference1.days}天 ${timeDifference1.hours}时 ${timeDifference1.minutes}分 ${timeDifference1.seconds}秒`;
        }

        // 立即更新网站运行时间
        updateSiteRunningTime();

        // 每秒更新一次网站运行时间
        setInterval(updateSiteRunningTime, 1000);
    </script>
@*    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>*@
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/vue.js"></script>
    <script src="~/lib/site.js"></script>
    <script src="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js"></script>
    <script src="~/mp3/index.4a0e1cf1.js"></script>
    <script src="~/js/index.js"></script>
    @await RenderSectionAsync("bottom", false)
</body>
</html>